<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>打字游戏zls</title>
	</head>
	<style type="text/css">
		.main {
			width: 1341px;
			height: 641px;
			background-image: url(bj-n.png);
			background-size: 100% 100%;
		}
		
		.xb {
			width: 142px;
			height: 108px;
			background-image: url(run.jpg);
			background-repeat:no-repeat;
			background-size: 100% 100%;
			font-size: 30px;
			font-family: "黑体";
			color: black;
			text-align: center;
			line-height: 155px;
			position: absolute;
		}
		
		.top {
			height: 518px;
			overflow: hidden;
			position: relative;
			
		}
		.text{
			font-size: 15px;
			font-weight: 50px;
			font-family: "黑体";
			color: white;
		}
		.kaishi{
			width: 70px;
			height: 70px;
			position: absolute;
			left: 480px; 
			top: 565px;
			border-radius:50%;
			cursor: pointer;

		}
		.zanting {
				width: 70px;
				height: 70px;
				position: absolute;
				left: 380px;
				top: 565px;
				border-radius: 50%;
				cursor: pointer;
			}
		.jieshu{
			width: 70px;
			height: 70px;
			position: absolute ;
			left: 280px;
			top: 565px;
			border-radius: 50%;
			cursor: pointer;			
		}
		.tuichu{
			width: 130px;
			height: 50px;
			position: absolute;
			left: 30px;
			top: 570px;
			cursor: pointer;
		}
	</style>

	<body>
		<div class="main">
			<div class="top">
			</div>
			<div class="bottom">
				<table border="1" width="100%" height="100px">
					<tr>
						<td width="700">
							<div class="kaishi"  onclick="ks()">
							</div>
							<div class="zanting" onclick="zt()">
							</div>
							<div class="tuichu" onclick="tc()">
							</div>							
							<div class="jieshu" onclick="js()">
							</div>
						</td>
						<td>
							<p class="text" id="rig">补刀率：<span>100%</span></p>
							<p class="text" id="time">时间：<span>00:00:00</span></p>
							<p class="text" id="su">速度：<span>0个/分钟</span></p>
						</td>
						<td width="150">
							<img src="jinx.jpg" style="right: 0px;"/>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>

    <script type="text/javascript">
		var xb=document.querySelector("#xb01");
		var nz1=0;
		var creatxb=0;
		var timeid=0;
		var time=0;
		var sum=0;
		var count=0;
		var rig=100;
		var dao=0;
		var daosu=0;
		function js() {
			zt();
			var divtop = document.querySelector(".top");
			divtop.innerHTML = "";
			time = 0;
			sum=0;
			count=0;
			dao=0;
			document.querySelector("#rig").innerHTML = "补刀率：100%";
			document.querySelector("#time").innerHTML = "时间: 00:00:00";
			document.querySelector("#su").innerHTML = "0个/分钟";
		}
		function tc(){
			close()
		}
		function zt(){
			clearInterval(nz1);
			clearInterval(creatxb);
			clearInterval(timeid);
			nz1=0;
		}
		window.onkeydown = function(event) {
				if(nz1 != 0) {
					var divtop = document.querySelector(".top");
					for(var i = 0; i < divtop.children.length; i++) {
						var k = divtop.children[i].getAttribute("key");
						if(k == event.keyCode) {
							//删除当前的苹果div
							divtop.removeChild(divtop.children[i]);
							dao++;
							daosu=parseInt((dao/time)*60);
							var divsu=document.querySelector("#su");
							divsu.innerHTML=daosu+"个/分钟"
							break;
						}
					}
				}
			}
		function ks()
		{
		if(nz1==0)
		{
		nz1 = setInterval(function()
		{
			var top =document.querySelector(".top");
			//var divtop = document.querySelector(".top");
			console.log(top.children);
			for (var i=0;i<top.children.length;i++) {
				var xb=top.children[i];
			    //var vt = top.children[i].getAttribute("v");
			    var vt=parseInt(top.children[i].getAttribute("v"));
				var wz=parseInt(xb.style.right)+vt;
				xb.style.right=wz+"px";	
				if(wz>1300){
					count++;
					var divtop = document.querySelector(".top");
					divtop.removeChild(divtop.children[i]);
					rig=parseInt((1-(count/sum))*100);
					var divrig = document.querySelector("#rig");
					divrig.innerHTML="补刀率："+rig+"%";
				}
			}
		},30);
		}
		creatxb = setInterval(function(){
			var div =document.createElement("div");
			div.className = "xb";
			div.style.right="-140px";
			div.style.top=parseInt(Math.random()*408)+"px";
			var ch =parseInt(Math.random()*26)+65;		
			div.setAttribute("key", ch);
			div.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&#"+ch+";";
			document.querySelector(".top").appendChild(div)
			sum++;
			var shu=Math.random();
			var code=parseInt(shu*7+1);
			div.setAttribute("v",code);
		},1000)
		timeid = setInterval(function() {
						time++;
						//把秒数转成时分秒

						var ss = time % 60;
						ss = ss < 10 ? "0" + ss : ss;
						var mm = parseInt(time / 60) % 60;
						mm = mm < 10 ? "0" + mm : mm;
						var hh = parseInt(time / 3600);
						hh = hh < 10 ? "0" + hh : hh;
						var divtime = document.querySelector("#time");
						divtime.innerHTML = "时间: " + hh + ":" + mm + ":" + ss;
					}, 1000);
		}
	</script>

</html>